<template>
  <div class="comment-section">
    <el-card class="comment-card" shadow="hover">
      <template #header>
        <span>添加评论</span>
      </template>
      <el-form :model="newComment" class="comment-form">
        <el-form-item>
          <el-input
            v-model="newComment.content"
            type="textarea"
            :rows="4"
            placeholder="请输入评论内容"
            class="comment-input"
          />
        </el-form-item>
        <el-form-item class="comment-actions">
          <el-button type="primary" @click="addComment">提交评论</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <h3 class="dialog-title">评论列表</h3>
    <el-card class="comment-card" v-if="comments.length > 0">
      <div v-for="(comment, index) in comments" :key="comment.id" class="comment-item">
        <div class="comment-avatar">
          <el-avatar :size="48" :src="avatarImg" />
        </div>
        <div class="comment-content">
          <div class="comment-header-row">
            <span class="comment-username">{{ comment.username || '匿名用户' }}</span>
            <span class="comment-time">{{ formatTime(comment.createTime) }}</span>
            <el-tooltip content="删除" placement="top">
              <el-button
                @click="deleteComment(comment.id)"
                type="danger"
                circle
                size="small"
                class="delete-btn"
              >
                <el-icon><Delete /></el-icon>
              </el-button>
            </el-tooltip>
          </div>
          <p>{{ comment.content }}</p>
        </div>
      </div>
    </el-card>
    <el-card v-else>
      <el-empty description="没有数据" />
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { commentListAllService } from '@/api/comment.js'
import { deleteCommentService, addCommentService } from '@/api/comment.js'
import { defineProps } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import avatarImg from '@/assets/avatar.png'

const props = defineProps({
  id: Number
})
const comments = ref([])
const getAllComments = async (articleId) => {
  let result = await commentListAllService(articleId)
  comments.value = result.data.map(comment => ({
    ...comment
  }))
}
getAllComments(props.id)

const newComment = ref({
  content: '',
  articleId: props.id
})

const addComment = async () => {
  if (newComment.value.content.trim() !== '') {
    await addCommentService(newComment.value)
    newComment.value.content = ''
    getAllComments(props.id)
    ElMessage.success('评论添加成功')
  } else {
    ElMessage.warning('请输入评论内容')
  }
}

const deleteComment = async (commentId) => {
  await deleteCommentService(commentId)
  getAllComments(props.id)
  ElMessage.success('评论删除成功')
}

const formatTime = (time) => {
  if (!time) return ''
  return dayjs(time).format('YYYY-MM-DD HH:mm')
}
</script>

<style scoped>
.comment-section {
  max-width: 600px;
  margin: 30px auto;
  padding: 24px 16px;
  background: #f7f9fa;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}

.comment-card {
  margin-bottom: 24px;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  background: #fff;
  border: none;
  width: 100%;
}

.comment-form {
  display: flex;
  flex-direction: column;
}

.comment-input .el-textarea__inner {
  border-radius: 10px;
  border: 1px solid #e0e3e7;
  background: #f9fafb;
  font-size: 15px;
  transition: border 0.2s;
}
.comment-input .el-textarea__inner:focus {
  border: 1.5px solid #409eff;
  background: #fff;
}

.comment-actions .el-button {
  border-radius: 8px;
  font-weight: 600;
  padding: 8px 28px;
  background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
  border: none;
  color: #fff;
  transition: background 0.2s;
}
.comment-actions .el-button:hover {
  background: linear-gradient(90deg, #66b1ff 0%, #409eff 100%);
}

.dialog-title {
  margin: 18px 0 10px 8px;
  font-size: 1.18em;
  color: #333;
  font-weight: 600;
  letter-spacing: 1px;
}

.comment-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 18px;
  padding: 16px 0 10px 0;
  border-radius: 10px;
  transition: background 0.2s;
  background: #f8fbff;
  box-shadow: 0 1px 4px rgba(64,158,255,0.04);
}
.comment-item:hover {
  background: #f0f6ff;
}

.comment-avatar {
  margin-right: 16px;
  display: flex;
  align-items: flex-start;
}
.comment-avatar .el-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(64,158,255,0.08);
  background: #eaf3ff;
  object-fit: cover;
}

.comment-content {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  padding: 10px 16px 8px 16px;
  min-width: 120px;
  max-width: 400px;
  word-break: break-all;
  position: relative;
  box-shadow: 0 1px 4px rgba(64,158,255,0.04);
  display: flex;
  flex-direction: column;
}

.comment-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  gap: 8px;
}

.comment-username {
  color: #409eff;
  font-weight: 500;
  font-size: 1em;
  margin-right: auto;
}

.comment-time {
  color: #8a99a6;
  font-size: 0.92em;
  margin-left: 12px;
  white-space: nowrap;
}

.delete-btn {
  margin-left: 8px;
  background: #fff0f0;
  color: #ff4d4f;
  border: none;
  transition: background 0.2s, color 0.2s;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.delete-btn:hover {
  background: #ff4d4f;
  color: #fff;
}

.comment-content p {
  margin: 0;
  color: #222;
  font-size: 15px;
  line-height: 1.6;
  word-break: break-word;
}

.el-empty {
  padding: 32px 0;
}

@media (max-width: 768px) {
  .comment-section {
    padding: 8px;
    max-width: 98vw;
  }
  .comment-content {
    max-width: 90vw;
  }
  .comment-item {
    flex-direction: column;
    align-items: stretch;
  }
  .comment-avatar {
    margin-bottom: 8px;
    margin-right: 0;
    justify-content: center;
  }
}
</style>